'use client';

import { useState, useEffect } from 'react';
import { useApp, useInitializeUser } from '@/contexts/AppContext';
import CartButton from './CartButton';

export default function Header() {
  const { state } = useApp();
  const [mounted, setMounted] = useState(false);
  useInitializeUser(); // 初始化用户状态

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-white/95 backdrop-blur">
      <div className="max-w-6xl mx-auto flex h-16 items-center justify-between px-4">
        {/* Logo */}
        <a href="/" className="flex items-center space-x-2">
          <span className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-400 rounded-lg flex items-center justify-center">
            <span className="text-xl">📦</span>
          </span>
          <span className="flex flex-col">
            <span className="text-xl font-bold text-gray-800">箱野</span>
            <span className="text-xs text-orange-600 -mt-1">SURPRISE YARD</span>
          </span>
        </a>

        {/* 导航菜单 */}
        <nav className="hidden md:flex items-center space-x-6">
          <a href="/" className="text-gray-600 hover:text-gray-800 transition-colors">首页</a>
          <a href="/shop" className="text-gray-600 hover:text-gray-800 transition-colors">盲盒商城</a>
          <a href="/signin" className="text-gray-600 hover:text-gray-800 transition-colors">每日签到</a>
          <a href="/about" className="text-gray-600 hover:text-gray-800 transition-colors">关于我们</a>
          <a href="/help" className="text-gray-600 hover:text-gray-800 transition-colors">帮助中心</a>
        </nav>

        {/* 用户操作 */}
        <div className="flex items-center space-x-3">
          <CartButton />
          
          {/* 签到按钮 */}
          <a 
            href="/signin"
            className="relative p-2 hover:bg-gray-100 rounded transition-colors group"
          >
            <span className="text-xl">📅</span>
            {mounted && !state.todaySignedIn && (
              <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
            )}
            <span className="absolute top-full right-0 mt-1 px-2 py-1 bg-black text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">
              {mounted ? (state.todaySignedIn ? '今日已签到' : '每日签到') : '每日签到'}
            </span>
          </a>
          
          <a href="/profile" className="p-2 hover:bg-gray-100 rounded transition-colors">
            <span className="text-xl">👤</span>
          </a>
        </div>
      </div>
    </header>
  );
}